<template>
    <div class="user-cell">
        <img src="../assets/images/default.png" class="avatar">
        <div class="user-info">
            <p class="name">{{name}}</p>
            <p>ID:{{id}}</p>
            <P>加入时间：{{createdAt}}</P>
        </div>
        <div class="level">
            <span class="level-title">会员级别</span>
            <span class="level-span">{{level}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user-item",
        props: {
            level: '',
            name: "",
            id:'',
            createdAt:""
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .user-cell {
        display: flex;
        flex-direction: row;
        background: #fff;
        align-items: center;
        height: 200px;
        border-bottom: dashed 1px #e0e0e0;
        .avatar {
            margin-left: 32px;
            margin-right: 32px;
            width: 120px;
            height: 120px;
        }
        .user-info {
            display: flex;
            flex: 1;
            flex-direction: column;
            p {
                font-size: 28px;
                color: #888888;
                margin-bottom: 10px;
            }
            .name {
                font-size: 44px;
                font-weight: bold;
                margin-bottom: 10px;
            }
        }
        .level {
            font-size: 12PX;
            margin-right: 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .level-title {
                color: #888888;
            }
            .level-span {
                margin-top: 20px;
                font-size: 12PX;
                color: @app-color;
            }
        }
    }
</style>